<template>
	<view class="page" :style="{backgroundImage: 'url(' + commonData.editTimbreData.editTembBg +')'}">
		<u-navbar title="通过语音" back-icon-color="#fff" title-color="#fff" :background="background"></u-navbar>
		<view class="options flex-row justify-around mt-30">
			<view class="flex-col flex-1 items-center" @click="checkClick(index)" v-for="(item,index) in optionList"
				:key="index">
				<image :src="item.img" mode="" class="opt-img"></image>
				<text class="opt-text">{{item.name}}</text>
			</view>
		</view>
		<view class="desc flex-row justify-center mt-60">
			<image class="desc-img" :src="commonData.editTimbreData.editDesc" mode=""></image>
		</view>

		<!-- 添加音色标题弹窗 -->
		<audioTitlePop ref="audiotitle" @submit="submit" :isLoading="isLoading"></audioTitlePop>

	</view>
</template>

<script>
	import commonData from '@/common/js/data.js';
	import audioTitlePop from "../../components/audioTitlePop/index.vue";
	import {
		myYinseFileup,
		MinorlanguagesTiqu//提取音色
	} from "@/api/audio.js"
	export default {
		components: {
			audioTitlePop,
		},
		data() {
			return {
				background: {
					backgroundColor: 'rgba(0,0,0,0)',
				},
				optionList: [{
						img: commonData.editTimbreData.luyinEdit,
						name: '记录'
					},
					{
						img: commonData.editTimbreData.shipinEdit,
						name: '视频声音'
					},
					{
						img: commonData.editTimbreData.bendiEdit,
						name: '文件夹声音'
					}
				],
				timbreId: '',
				audioUrl: '',
				isLoading: false, //是否加载中
				commonData: {},
				isxiao:false,
				list_id:"",
			}
		},
		onLoad(options) {
			console.log(options, 'options')
			this.timbreId = options.id;
			this.commonData = commonData;
			if(options.type == "editxiao"){
				this.isxiao = true
				this.list_id = options.listid
			}
		},
		methods: {
			// 修改音色
			editTimbreUpload(){
				myYinseFileup({
					// uid: uni.getStorageSync("userId"),
					id: this.timbreId,
					title: this.audioTitle,
					mp3: this.audioUrl
				}).then(res => {
					console.log(res, 'ressss')
					this.isLoading = false;
					uni.hideLoading();
					if (res.errno == 0) {
						console.log(this.videoPath, 'this.videoPath')
						this.$refs.audiotitle.close();
						// this.getTimbreList();
						uni.reLaunch({
							url: '/pages/mine/index?current=1'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					this.isLoading = false;
					uni.hideLoading();
					console.log(err, 'err')
					uni.showToast({
						title: '出错了',
						icon: 'none'
					})
				})
			},
			// 输入标题--确定
			submit(data) {
				console.log(data, 'submit')
				this.audioTitle = data
				uni.showLoading({
					title: '上传中'
				})
				this.isLoading = true;
				this.editTimbreUpload()
			},
			uploadAudio(filePath, fileName) {
				var _this = this;
				_this.$upload(filePath).then(res => {
					console.log(res, 'uploadImg')
					if (res.data.errno == 1) {
						_this.audioUrl = res.data.img
						// _this.audioName = fileName
						console.log(_this.audioUrl, '上传音频')
						if(this.isxiao){
							this.getTiqu( res.data.img)
							return
						}
						_this.$refs.audiotitle.open();
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none'
						})
					}


				}).catch(err => {
					console.log(err, 'err')

				})
			},
			checkClick(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pagesCreate/addAudio/index?toAddType=1' + '&timbreId=' + this.timbreId + '&isxiao='+this.isxiao + "&listid="+ this.list_id
					})
				} else if (index == 1) {
					uni.showToast({
						title: '开发中',
						icon: 'none'
					})
				} else if (index == 2) {
					// #ifdef MP
					var _this = this;
					wx.chooseMessageFile({
						count: 1, // 默认99
						type: 'file', // 选择文件的类型
						extension: ['mp3', 'm4a', 'amr', 'wav', 'aac', 'MP3', 'M4A', 'AMR', 'WAV',
							'AAC'
						], // 选择文件的扩展名
						// extension: ['.m﻿4a', '.mp3'],
						success: function(res) {
							const filePath = res.tempFiles[0].path; // 获取音频文件的临时路径
							// const fileName = res.tempFiles[0].name;
							console.log(res, 'res')
							_this.uploadAudio(filePath);

						}
					});
					// #endif
				}
			},
			// 提取音色
			getTiqu(url){
				uni.showLoading({
					title: '提取中',
					mask:true
				})
				console.log(url,"提取音色");
				MinorlanguagesTiqu({
					uid: uni.getStorageSync('userId'),
					voiceUrl:url,
					lan_id:this.timbreId,
					list_id:this.list_id
				}).then(res=>{
					uni.hideLoading()
					if(res.errno == 0){
						uni.showToast({
							title:"提取成功",
							icon:"none"
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1,
							})
						},1000)
						console.log(res,"提取音色");
					}else {
						uni.showToast({
							title:res.msg,
							icon:"none"
						})
					}
					
				}).catch(err => {
					uni.hideLoading()
					uni.showToast({
						title: '提取失败',
						icon: 'none'
					})
				})
				
			}
		}
	}
</script>
<style lang="less" scoped>
	/deep/ .u-drawer-bottom {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	/deep/ .u-mode-center-box {
		background-color: rgba(0, 0, 0, 0) !important;
	}
</style>
<style>
	@import url(../../static/css/common.css);

	page {
		padding-bottom: 61rpx;
		background-color: #111113;
		height: 100%;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	.mt-30 {
		margin-top: 30rpx;
	}

	.mt-60 {
		margin-top: 60rpx;
	}

	.page {
		width: 100%;
		// background-image: url("https://shijia.axu9.com/images/edit-temb-bg.png");
		background-repeat: no-repeat;
		background-size: 100% 494rpx;
	}

	.desc-img {
		width: 672rpx;
		height: 1117rpx;
	}

	.opt-img {
		width: 142rpx;
		height: 141rpx;
		margin-bottom: 30rpx;
	}

	.opt-text {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 26rpx;
		color: #ffffff;
	}
</style>